<template>
    <div class="classify-container">
        <div class="body">
            <h2>导航</h2>
            <div class="grid">
                <div class="card" v-for="item in navList" :key="item.title" @click="clickCard(item.link)">
                    <h3>{{ item.title }}</h3>
                    <div class="info">{{ item.info }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
// 记录导航信息
import { ref } from "vue";

// 数组项说明
// 1. title 标题
// 2. info 简介
// 3. link 链接
const navList = ref([
    {
        title: "网道-WangDoc",
        info: "网道（WangDoc.com）是一个文档网站，提供互联网开发文档",
        link: "https://wangdoc.com/"
    },
    {
        title: "个人博客",
        info: "Star Dream 是一个专属于我自己的网站，记录着一些文档",
        link: "https://stardreamandfeng.github.io/"
    },
    {
        title: "有道翻译",
        info: "在线即时翻译、免费AI翻译、文档文本翻译、人工翻译、网页翻译.",
        link: "https://fanyi.youdao.com/"
    },
    {
        title: "阮一峰的网络日志",
        info: "这里记录每周值得分享的科技内容，周五发布。",
        link: "https://www.ruanyifeng.com/blog/"
    },
    {
        title: "DreamCollector",
        info: "一些技术相关的文章",
        link: "https://blog.pzai.cloud/"
    },
    {
        title: "Hexo",
        info: "快速、简单且强大的网志框架",
        link: "https://hexo.io/zh-tw/"
    },
    {
        title: "百里飞洋",
        info: "这里是百里飞洋(BarryFlynn)的个人博客网站主页,这里有学习的笔记,有生活的乐趣",
        link: "https://blog.meta-code.top/"
    },
    {
        title: "HackWay技术学习路线",
        info: "HackWay为程序员自学计算机专业、编程语言提供循序渐进的学习路线、资源以及交流社区",
        link: "https://hackway.org/"
    },
    {
        title: "Go 语言中国",
        info: "Go语言圣经(中文版)",
        link: "https://gopl-zh.github.io/"
    },
    {
        title: "Docker&Kubernetes小记",
        info: "对 Docker、Docker Compose、Kubernetes 这些技术有一个基本的了解",
        link: "https://www.bilibili.com/read/cv21266100"
    },
    {
        title: "CS-Note",
        info: "算法、计算机基础、数据库、Java、系统设计、面向对象和编码实践等",
        link: "http://www.cyc2018.xyz/"
    },
    {
        title: "JavaGuide",
        info: "「Java学习 + 面试指南」一份涵盖大部分 Java 程序员所需要掌握的核心知识。准备 Java 面试，首选 JavaGuide!",
        link: "https://javaguide.cn/"
    },
    {
        title: "沉默王二技术博客",
        info: "沉默王二BB:这是一份通俗易懂、风趣幽默的Java学习指南,内容涵盖Java基础、Java并发编程、Java虚拟机、Java企业级开发、Java面试等核心知识点。学Java,就认准二哥的Java进阶之路",
        link: "https://tobebetterjavaer.com/"
    },
    {
        title: "在线英语听力室",
        info: "英语听力,免费英语,在线英语,英语学习,英语口语,voa,英语听力下载,英语四级,英语六级,在线学英语,英语辅导,少儿英语,英语单词,新概念英语,英语学习网站,英语自学",
        link: "http://www.tingroom.com/"
    },
    {
        title: "DeepL 翻译",
        info: "DeepL翻译:全世界最准确的翻译",
        link: "https://www.deepl.com/translator"
    },
    {
        title: "Youtube",
        info: "Youtube:全球最大的视频分享平台，正常途径可能访问不到",
        link: "https://www.youtube.com/"
    },
    {
        title: "哔哩哔哩",
        info: "Bilibili:国内知名的视频弹幕网站",
        link: "https://www.bilibili.com/"
    },
    {
        title: "微博",
        info: "随时随地发现新鲜事！微博带你欣赏世界上每一个精彩瞬间，了解每一个幕后故事。",
        link: "https://www.weibo.com/"
    },
    {
        title: "推特",
        info: "推特是一个关于最新鲜的科技、娱乐、体育及国际新闻的微博客网站。正常途径可能无法访问",
        link: "https://twitter.com/"
    },
    {
        title: "优质节点",
        info: "优质免费节点每天测速更新2022(6小时更新一次)",
        link: "https://v2cross.com/archives/1884"
    },
    {
        title: "AI 工具集",
        info: "AI工具集导航 | 500+ AI工具导航大全,国内外AI工具集合网站",
        link: "https://ai-bot.cn/"
    },
    {
        title: "keynav",
        info: "离开鼠标,纯键盘操作",
        link: "https://www.semicomplete.com/projects/keynav/"
    },
    {
        title: "在线编辑图片(iloveimg)",
        info: "可批量编辑图片 的所有工具",
        link: "https://www.iloveimg.com/zh-cn"
    },
    {
        title: "路过图床",
        info: "路过图床, 免费公共图床, 提供图片上传和图片外链服务, 原图保存, 全球CDN加速.",
        link: "https://imgse.com"
    },
    {
        title: "可视化动画",
        info: "一个专注于前端视觉效果的集合应用,里面包含各种丰富的css动效、canvas动画等90多个案例",
        link: "http://hepengwei.cn/#/html/visualDesign"
    }
]);

// 点击事件
const clickCard = (link: string | undefined) => {
    if (!link) return;
    // 跳转到其他网页
    window.open(link);
}
</script>

<style scoped lang="scss">
.classify-container {
    $primary-color: #4954e6;
    margin: 10px 50px 150px;

    .body {
        margin: 0 auto;

        h2 {
            font-size: 20px;
        }

        .grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
            grid-auto-rows: minmax(160px, auto);
            grid-gap: 20px;

            .card {
                display: flex;
                flex-direction: column;
                justify-content: center;
                border: 1px solid $primary-color;
                border-radius: 12px;
                box-shadow: rgba(73, 84, 230, 0.15) 1.95px 1.95px 2.6px;
                box-sizing: border-box;

                &:hover {
                    color: #fff;
                    box-shadow: rgba(73, 84, 230, 0.25) 0px 13px 27px -5px, rgba(73, 84, 230, 0.3) 0px 8px 16px -8px;
                    background-color: $primary-color;
                    animation: move-up 0.5s ease-in-out forwards;
                    cursor: pointer;
                }

                h3 {
                    text-align: center;
                    margin: 0;
                    margin-bottom: 10px;
                    padding: 0;
                }

                .info {
                    padding: 0 10px 0 15px;
                    word-break: break-all;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 3;
                    line-clamp: 3;
                }
            }
        }
    }
}

/* 向上移动动画 */
@keyframes move-up {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-10px);
    }
}
</style>